<template>
  <div class="item-detail flex column">
    <div class="item-title">拼团组件</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="副标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_info_summary" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="商品呈现">
      	  <div class="flex center">
              <Select v-model="detailData.json.mode" class="select-wrapper">
        				<Option value="system">自动设置</Option>
        				<Option value="input">手动设置</Option>
        			</Select>
          </div>
        </FormItem>
        <FormItem label="商品ID" v-if="detailData.json.mode=='input'">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="groupGoods" @click.native="tapInput(10)" placeholder="请选择商品"></Input>
          </div>
        </FormItem>
        <FormItem label="商品数量">
	      <div class="flex center">
	        <Select v-model="detailData.json.number	" class="select-wrapper">
	          <Option :value=6>6个</Option>
	          <Option :value=7>7个</Option>
			  <Option :value=8>8个</Option>
	          <Option :value=10>10个</Option>
	        </Select>
	      </div>
	    </FormItem>
	    <FormItem label="开启更多">
  	      <div class="flex center">
  	        <Select v-model="detailData.json.more.display" class="select-wrapper">
  	          <Option value="false">关闭</Option>
  	          <Option value="true">开启</Option>
  	        </Select>
  	      </div>
  	    </FormItem>
  	    <template v-if="detailData.json.more.display=='true' " >
  	    	<FormItem label="跳转类型">
  	          <div class="flex center input-wrapper">
  	            <Select v-model="detailData.json.more.skip_type" class="select-wrapper">
  	              <Option value="good">商品</Option>
  	              <Option value="label">微页面</Option>
  	            </Select>
                <Input style="width: 200px;" v-model="detailData.json.more.skip_url" @click.native="tapInput(1)" placeholder="请输入商品ID或微页面ID"></Input>
  	           
  	          </div>
  	        </FormItem>
  	    </template>
	    
      </Form>
    </div>

    <!-- 商品选择器 -->
    <goodsSelect buyMode="-9" @confirm="commitGoodsFn" ref="goodsModal" :selectNum="selectNum" :goodsIdStr="goodsIdStr" ></goodsSelect>
    <!-- 微页面选择器 -->
    <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>

  </div>
</template>
<script>

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'

import { uploadImage } from 'api/uploadImage'

export default {
  name: 'SecondKillDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      selectNum: 1,
	  }
  },
  computed: {
    goodsIdStr: function () {
      if (this.selectNum == 1) {
        return this.detailData.json.more.skip_url;
      } else {
        return this.groupGoods;
      }
    },
    groupGoods: function () {
      var tmpStr = "";
      for (var i = 0; i < this.detailData.json.goods.length; i++) {
          tmpStr += this.detailData.json.goods[i];
          if (i < (this.detailData.json.goods.length-1)) {
            tmpStr += ",";
          }
      }
      return tmpStr;
    }
  },
  methods: {
    tapInput(number) {
      this.selectNum = number;
      if (this.selectNum == 1) {
        if (this.detailData.json.more.skip_type == "good") {
          this.openGoodsSelectFn();
        } else {
          // 打开微页面选择器
          this.$refs.micropageModal.show();
        }
      } else {
          this.openGoodsSelectFn();
      }
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show()
    },

    // 选中商品回调
    commitGoodsFn(_id){
    	if (this.selectNum==1) {
        this.detailData.json.more.skip_url = _id;
        this.detailData.json.more.path='app/mall/item/item?goodsId='+_id;
      } else {
        this.detailData.json.goods = _id.split(",");
      } 

    },

    // 选中微页面回调
    chosePages(ids) {
        this.detailData.json.more.skip_url = ids[0];
        this.detailData.json.more.path='app/mall/label/label?labelId='+ids[0];

    },
    
  },

  created() {

  },

  components: {
  	goodsSelect,MicropageSelect
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

.item-content {
	padding: 16px;
}

.content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.img-wrapper {
	width: 82px;
    height: 82px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}

select {
    height: 34px;
    width: 80px;
    margin-right: 8px;
    padding-left: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

</style>
